
.hole-card {
  position: relative;
  overflow: hidden;
  margin: 0 auto;

  // 孔在下方
  .hole-down {
    // 卡片宽度
    width: 600px;
    overflow: hidden;

    // 可不要
    height: 200px;

    // 阴影 - 不需要就去掉
    // 3px 大小, 灰色阴影
    filter: drop-shadow(0 0 3px #999);

    &::before {
      position: absolute;
      content: "";
      // 孔半径
      bottom: -60px;
      left: -60px;
      // 孔直径
      width: 120px;
      height: 120px;
      border-radius: 50%;

      // 白色背景，宽度 = 卡片宽度 - 孔直径
      box-shadow: 0 0 0 480px #fff; 
      z-index: -1;
    }
    
    &::after {
      position: absolute;
      content: "";
      bottom: -60px;
      right: -60px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      box-shadow: 0 0 0 480px #fff; 
      z-index: -1;
    }

    // 卡片中间虚线 不需要就去掉
    .middle-border {
      position: absolute;
      
      // 宽度 = 卡片宽度 - 孔直径
      width: 480px;
      // 左移孔半径
      left: 60px;
      bottom: 0;
      border: 1px dashed #ccc;
    }
  }
  
  // 孔在上方
  .hole-up {
    width: 600px;
    overflow: hidden;
    filter: drop-shadow(0 0 3px #999);

    height: 200px;

    &::before {
      position: absolute;
      content: "";
      top: -60px;
      left: -60px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      box-shadow: 0 0 0 480px #fff; 
      z-index: -1;
    }
    
    &::after {
      position: absolute;
      content: "";
      top: -60px;
      right: -60px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      box-shadow: 0 0 0 480px #fff; 
      z-index: -1;
    }
  }

  // 遮盖上边阴影, 没有阴影则删掉
  .cover-up {
    // 3px 为阴影宽度
    padding: 3px;
    padding-top: 0;
    overflow: hidden;
  }

  // 遮盖下边阴影
  .cover-down {
    padding: 3px;
    padding-bottom: 0;
    overflow: hidden;
  }
}